<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="城市" prop="city">
        <el-input v-model="formData.city" placeholder="请输入城市" />
      </el-form-item>
      <el-form-item label="供电单位" prop="org">
        <el-input v-model="formData.org" placeholder="请输入供电单位" />
      </el-form-item>
      <el-form-item label="客户编号" prop="custNo">
        <el-input v-model="formData.custNo" placeholder="请输入客户编号" />
      </el-form-item>
      <el-form-item label="用户编号" prop="consNo">
        <el-input v-model="formData.consNo" placeholder="请输入用户编号" />
      </el-form-item>
      <el-form-item label="客户名称" prop="consName">
        <el-input v-model="formData.consName" placeholder="请输入客户名称" />
      </el-form-item>
      <el-form-item label="用电地址" prop="address">
        <el-input v-model="formData.address" placeholder="请输入用电地址" />
      </el-form-item>
      <el-form-item label="合同容量" prop="htrl">
        <el-input v-model="formData.htrl" placeholder="请输入合同容量" />
      </el-form-item>
      <el-form-item label="运行容量" prop="yxrl">
        <el-input v-model="formData.yxrl" placeholder="请输入运行容量" />
      </el-form-item>
      <el-form-item label="城乡标志" prop="cxbz">
        <el-input v-model="formData.cxbz" placeholder="请输入城乡标志" />
      </el-form-item>
      <el-form-item label="用户行业类别" prop="hylb">
        <el-input v-model="formData.hylb" placeholder="请输入用户行业类别" />
      </el-form-item>
      <el-form-item label="客户分类" prop="hkfl">
        <el-input v-model="formData.hkfl" placeholder="请输入客户分类" />
      </el-form-item>
      <el-form-item label="临时电标志" prop="lsdbz">
        <el-input v-model="formData.lsdbz" placeholder="请输入临时电标志" />
      </el-form-item>
      <el-form-item label="市场化属性" prop="schsx">
        <el-input v-model="formData.schsx" placeholder="请输入市场化属性" />
      </el-form-item>
      <el-form-item label="用电类别" prop="ydlb">
        <el-input v-model="formData.ydlb" placeholder="请输入用电类别" />
      </el-form-item>
      <el-form-item label="用户电压" prop="dhdy">
        <el-input v-model="formData.dhdy" placeholder="请输入用户电压" />
      </el-form-item>
      <el-form-item label="用户状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="202308电量" prop="dl202308">
        <el-input v-model="formData.dl202308" placeholder="请输入202308电量" />
      </el-form-item>
      <el-form-item label="202308电费" prop="df202308">
        <el-input v-model="formData.df202308" placeholder="请输入202308电费" />
      </el-form-item>
      <el-form-item label="202309电量" prop="dl202309">
        <el-input v-model="formData.dl202309" placeholder="请输入202309电量" />
      </el-form-item>
      <el-form-item label="202309电费" prop="df202309">
        <el-input v-model="formData.df202309" placeholder="请输入202309电费" />
      </el-form-item>
      <el-form-item label="202310电量" prop="dl202310">
        <el-input v-model="formData.dl202310" placeholder="请输入202310电量" />
      </el-form-item>
      <el-form-item label="202310电费" prop="df202310">
        <el-input v-model="formData.df202310" placeholder="请输入202310电费" />
      </el-form-item>
      <el-form-item label="202311电量" prop="dl202311">
        <el-input v-model="formData.dl202311" placeholder="请输入202311电量" />
      </el-form-item>
      <el-form-item label="202311电费" prop="df202311">
        <el-input v-model="formData.df202311" placeholder="请输入202311电费" />
      </el-form-item>
      <el-form-item label="202312电量" prop="dl202312">
        <el-input v-model="formData.dl202312" placeholder="请输入202312电量" />
      </el-form-item>
      <el-form-item label="202312电费" prop="df202312">
        <el-input v-model="formData.df202312" placeholder="请输入202312电费" />
      </el-form-item>
      <el-form-item label="202401电量" prop="dl202401">
        <el-input v-model="formData.dl202401" placeholder="请输入202401电量" />
      </el-form-item>
      <el-form-item label="202401电费" prop="df202401">
        <el-input v-model="formData.df202401" placeholder="请输入202401电费" />
      </el-form-item>
      <el-form-item label="202402电量" prop="dl202402">
        <el-input v-model="formData.dl202402" placeholder="请输入202402电量" />
      </el-form-item>
      <el-form-item label="202403电费" prop="df202402">
        <el-input v-model="formData.df202402" placeholder="请输入202403电费" />
      </el-form-item>
      <el-form-item label="202403电量" prop="dl202403">
        <el-input v-model="formData.dl202403" placeholder="请输入202403电量" />
      </el-form-item>
      <el-form-item label="202403电费" prop="df202403">
        <el-input v-model="formData.df202403" placeholder="请输入202403电费" />
      </el-form-item>
      <el-form-item label="202404电量" prop="dl202404">
        <el-input v-model="formData.dl202404" placeholder="请输入202404电量" />
      </el-form-item>
      <el-form-item label="202404电费" prop="df202404">
        <el-input v-model="formData.df202404" placeholder="请输入202404电费" />
      </el-form-item>
      <el-form-item label="202405电量" prop="dl202405">
        <el-input v-model="formData.dl202405" placeholder="请输入202405电量" />
      </el-form-item>
      <el-form-item label="202405电费" prop="df202405">
        <el-input v-model="formData.df202405" placeholder="请输入202405电费" />
      </el-form-item>
      <el-form-item label="202406电量" prop="dl202406">
        <el-input v-model="formData.dl202406" placeholder="请输入202406电量" />
      </el-form-item>
      <el-form-item label="202406电费" prop="df202406">
        <el-input v-model="formData.df202406" placeholder="请输入202406电费" />
      </el-form-item>
      <el-form-item label="202407电量" prop="dl202407">
        <el-input v-model="formData.dl202407" placeholder="请输入202407电量" />
      </el-form-item>
      <el-form-item label="202407电费" prop="df202407">
        <el-input v-model="formData.df202407" placeholder="请输入202407电费" />
      </el-form-item>
      <el-form-item label="202408电量" prop="dl202408">
        <el-input v-model="formData.dl202408" placeholder="请输入202408电量" />
      </el-form-item>
      <el-form-item label="202408电费" prop="df202408">
        <el-input v-model="formData.df202408" placeholder="请输入202408电费" />
      </el-form-item>
      <el-form-item label="202409电量" prop="dl202409">
        <el-input v-model="formData.dl202409" placeholder="请输入202409电量" />
      </el-form-item>
      <el-form-item label="202409电费" prop="df202409">
        <el-input v-model="formData.df202409" placeholder="请输入202409电费" />
      </el-form-item>
      <el-form-item label="总电量" prop="totaldl">
        <el-input v-model="formData.totaldl" placeholder="请输入总电量" />
      </el-form-item>
      <el-form-item label="总电费" prop="totaldf">
        <el-input v-model="formData.totaldf" placeholder="请输入总电费" />
      </el-form-item>
      <el-form-item label="法人联系人电话" prop="frlxdh">
        <el-input v-model="formData.frlxdh" placeholder="请输入法人联系人电话" />
      </el-form-item>
      <el-form-item label="法人联系人" prop="frlxr">
        <el-input v-model="formData.frlxr" placeholder="请输入法人联系人" />
      </el-form-item>
      <el-form-item label="经办人电话" prop="jbrdh">
        <el-input v-model="formData.jbrdh" placeholder="请输入经办人电话" />
      </el-form-item>
      <el-form-item label="经办人" prop="jbr">
        <el-input v-model="formData.jbr" placeholder="请输入经办人" />
      </el-form-item>
      <el-form-item label="账务联系人电话" prop="cwlxdh">
        <el-input v-model="formData.cwlxdh" placeholder="请输入账务联系人电话" />
      </el-form-item>
      <el-form-item label="账务联系人" prop="cwlxr">
        <el-input v-model="formData.cwlxr" placeholder="请输入账务联系人" />
      </el-form-item>
      <el-form-item label="电气联系人电话" prop="dqlxdh">
        <el-input v-model="formData.dqlxdh" placeholder="请输入电气联系人电话" />
      </el-form-item>
      <el-form-item label="电气联系人" prop="dqlxr">
        <el-input v-model="formData.dqlxr" placeholder="请输入电气联系人" />
      </el-form-item>
      <el-form-item label="停送电联系人电话" prop="tsdlxdh">
        <el-input v-model="formData.tsdlxdh" placeholder="请输入停送电联系人电话" />
      </el-form-item>
      <el-form-item label="停送电联系人" prop="tsdlxr">
        <el-input v-model="formData.tsdlxr" placeholder="请输入停送电联系人" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { ElecDataContactApi, ElecDataContact } from '@/api/knowledge/elecdatacontact'

/** 用电信息 表单 */
defineOptions({ name: 'ElecDataContactForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  city: undefined,
  id: undefined,
  org: undefined,
  custNo: undefined,
  consNo: undefined,
  consName: undefined,
  address: undefined,
  htrl: undefined,
  yxrl: undefined,
  cxbz: undefined,
  hylb: undefined,
  hkfl: undefined,
  lsdbz: undefined,
  schsx: undefined,
  ydlb: undefined,
  dhdy: undefined,
  status: undefined,
  dl202308: undefined,
  df202308: undefined,
  dl202309: undefined,
  df202309: undefined,
  dl202310: undefined,
  df202310: undefined,
  dl202311: undefined,
  df202311: undefined,
  dl202312: undefined,
  df202312: undefined,
  dl202401: undefined,
  df202401: undefined,
  dl202402: undefined,
  df202402: undefined,
  dl202403: undefined,
  df202403: undefined,
  dl202404: undefined,
  df202404: undefined,
  dl202405: undefined,
  df202405: undefined,
  dl202406: undefined,
  df202406: undefined,
  dl202407: undefined,
  df202407: undefined,
  dl202408: undefined,
  df202408: undefined,
  dl202409: undefined,
  df202409: undefined,
  totaldl: undefined,
  totaldf: undefined,
  frlxdh: undefined,
  frlxr: undefined,
  jbrdh: undefined,
  jbr: undefined,
  cwlxdh: undefined,
  cwlxr: undefined,
  dqlxdh: undefined,
  dqlxr: undefined,
  tsdlxdh: undefined,
  tsdlxr: undefined,
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ElecDataContactApi.getElecDataContact(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ElecDataContact
    if (formType.value === 'create') {
      await ElecDataContactApi.createElecDataContact(data)
      message.success(t('common.createSuccess'))
    } else {
      await ElecDataContactApi.updateElecDataContact(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    city: undefined,
    id: undefined,
    org: undefined,
    custNo: undefined,
    consNo: undefined,
    consName: undefined,
    address: undefined,
    htrl: undefined,
    yxrl: undefined,
    cxbz: undefined,
    hylb: undefined,
    hkfl: undefined,
    lsdbz: undefined,
    schsx: undefined,
    ydlb: undefined,
    dhdy: undefined,
    status: undefined,
    dl202308: undefined,
    df202308: undefined,
    dl202309: undefined,
    df202309: undefined,
    dl202310: undefined,
    df202310: undefined,
    dl202311: undefined,
    df202311: undefined,
    dl202312: undefined,
    df202312: undefined,
    dl202401: undefined,
    df202401: undefined,
    dl202402: undefined,
    df202402: undefined,
    dl202403: undefined,
    df202403: undefined,
    dl202404: undefined,
    df202404: undefined,
    dl202405: undefined,
    df202405: undefined,
    dl202406: undefined,
    df202406: undefined,
    dl202407: undefined,
    df202407: undefined,
    dl202408: undefined,
    df202408: undefined,
    dl202409: undefined,
    df202409: undefined,
    totaldl: undefined,
    totaldf: undefined,
    frlxdh: undefined,
    frlxr: undefined,
    jbrdh: undefined,
    jbr: undefined,
    cwlxdh: undefined,
    cwlxr: undefined,
    dqlxdh: undefined,
    dqlxr: undefined,
    tsdlxdh: undefined,
    tsdlxr: undefined,
  }
  formRef.value?.resetFields()
}
</script>